{% extends "/based/based.html" %}
{% block content %}

	<main class="page-content">
	<form method="POST" name = "memo">
	<style>
	.volvo{color: grey;}
	.saab{color: red;}
	.txt_area{color:black;}
	</style>
	<br><br>
	 <table align="center" border="0" style="width: 80%; ">
		<tbody>
			<tr>
				<td >
				<div align="center" style="text-align:center" id="fourth" class="buttonBox" type="submit" value = "select"/> 
				  <button name='submit_button' value='select'>选择</button>
				  <div class="border"></div>
				  <div class="border"></div>
				  <div class="border"></div>
				  <div class="border"></div>
				</div> 
				
				<select id="tradeDate" size=13 name="tradeDate" class="volvo" style="vertical-align: middle;">	
					  <option>realtime(vs prev day)</option>
 					  <option>realtime(vs prev 15min))</option>   
					  <option>---  daily --- </option> 
		        	  {%for i in range(0,tradeDate|length) %} 
		        	 	 <option>{{tradeDate[i]}}</option> 
		        	  {% endfor %}
				       
				</select>
				</td>
			</tr>
			</tbody>
		</table>
	<table align="center" border="0" width="90%">
    <tbody>
        <tr>
        <td>
          <div id="log" >now: {{log}}</div><br>
          <div id="container" ></div>
        </td>
        </tr>
    
    </tbody>   
    </table>    
           
           
 </form>
	
	
	<div align="center"><span style="font-size: x-large;"><span style="text-decoration: underline;"></span></span></div>
	<script>
	
	

	const data = {
			nodes:[ 
					  {%for i in range(0,nodes|length) %} 
						{id:'{{nodes[i]["id"]}}',
						label:'{{nodes[i]["label"]}}',
						size:{{nodes[i]["size"]}},
						chg_cls_r:{{nodes[i]["chg_cls_r"]}},
						style:{
							fill:'{{nodes[i]["style"]["fill"]}}',
							
							},
						cluster:{{nodes[i]["cluster"]}},
						comboId:'{{nodes[i]["comboId"]}}',
						},
						
						{% endfor %}
			  ],
		   combos: [
			           {%for i in range(0,combos|length) %} 
						{id:'{{combos[i]["id"]}}',
						label:'{{combos[i]["label"]}}',
						
						
						},
						
						{% endfor %}
			  ],
		  edges: [ 
				  {%for i in range(0,edges|length) %} 
					{id:'{{edges[i]["id"]}}',
					source:'{{edges[i]["source"]}}',
					target:'{{edges[i]["target"]}}',
					},
					
					{% endfor %}
				  ],
	  
	};

	const colors = [
	  '#BDD2FD',
	  '#BDEFDB',
	  '#C2C8D5',
	  '#FBE5A2',
	  '#F6C3B7',
	  '#B6E3F5',
	  '#D3C6EA',
	  '#FFD8B8',
	  '#AAD8D8',
	  '#FFD6E7',
	];
	const strokes = [
	  '#5B8FF9',
	  '#5AD8A6',
	  '#5D7092',
	  '#F6BD16',
	  '#E8684A',
	  '#6DC8EC',
	  '#9270CA',
	  '#FF9D4D',
	  '#269A99',
	  '#FF99C3',
	];
	const tooltip = new G6.Tooltip({
		  offsetX: 10,
		  offsetY: 10,
		  // the types of items that allow the tooltip show up
		  // 允许出现 tooltip 的 item 类型
		  itemTypes: ['node', 'edge'],
		  // custom the tooltip's content
		  // 自定义 tooltip 内容
		  getContent: (e) => {
		    const outDiv = document.createElement('div');
		    outDiv.style.width = 'fit-content';
		    //outDiv.style.padding = '0px 0px 20px 0px';
		    outDiv.innerHTML = `
		      <ul>
		        <li> ${e.item.getModel().label || e.item.getModel().id}</li>
		      </ul>
		      <ul>
		        <li> ${e.item.getModel().chg_cls_r || e.item.getModel().id}</li>
		      </ul> `;
		    return outDiv;
		  },
		});
	const nodes = data.nodes;
	const clusterMap = new Map();
	let clusterId = 0;
	nodes.forEach(function (node) {
	  // cluster
	  if (node.cluster && clusterMap.get(node.cluster) === undefined) {
	    clusterMap.set(node.cluster, clusterId);
	    clusterId++;
	  }
	  const cid = clusterMap.get(node.cluster);
	  if (!node.style) {
	    node.style = {};
	  }
	  node.style.stroke = strokes[cid % strokes.length];
	});

	const container = document.getElementById('container');
	const width = 2800;
	const height = 1800;
	const graph = new G6.Graph({
	  container: 'container',
	  width,
	  height,
	  plugins: [tooltip],
	  modes: {
	    default: ['drag-combo', 'drag-node', 'drag-canvas', 'zoom-canvas'],
	  },
	  layout: {
		    type: 'force',
		    clustering: true,
		    clusterNodeStrength: -5,
		    clusterEdgeDistance: 200,
		    clusterNodeSize: 20,
		    clusterFociStrength: 1.2,
		    nodeSpacing: 5,
		    preventOverlap: true,
	  },
	  animate: true,
	  defaultNode: {
		  labelCfg:{
			  style:{
					  fill:'white',
					  fontSize:25
					  },
		    },
	  },
	  defaultEdge: {
	    style: {
	      fill: '#352d2c',
	      endArrow: {
	        path: 'M 0,0 L 8,4 L 8,-4 Z',
	        fill: '#352d2c',
	      },
	    },
	  },
	  defaultCombo: {
		  labelCfg:{
			  style:{
					  fill:'white',
					  fontSize:35
					  },
	  			},
		    },
	});
	graph.data(data);
	graph.render();

	if (typeof window !== 'undefined')
	  window.onresize = () => {
	    if (!graph || graph.get('destroyed')) return;
	    if (!container || !container.scrollWidth || !container.scrollHeight) return;
	    graph.changeSize(container.scrollWidth, container.scrollHeight);
	  };

	
	</script>
{% endblock %}